<template>
	<view class="apply-number">
		<view class="bg">
			<view class="input info-res" v-if="isHasApply">
				<view class="name">申请结果</view>
				<view><input type="text" :value="applyInfo.status==1?'申请通过':applyInfo.status==0?'待审核':'申请驳回'" disabled class="input-value info-res-tx"
					 :class="[applyInfo.status==1?'pass':applyInfo==0?'checking':'red']" /></view>
			</view>

			<view class="input info-res" v-if="applyInfo.status==-1">
				<view class="name">驳回理由</view>
				<view><input type="text" :value="applyInfo.reject_reason" disabled class="input-value info-res-tx red" /></view>
			</view>

			<view class="input">
				<view class="name">店铺名称</view>
				<view><input type="text" class="input-value" v-model="shop" value="" placeholder="请输入店铺名称" /></view>
			</view>
			<!-- 			<view class="input">
				<view class="name">营业执照</view>
				<view><input type="text" value="" v-model="license" class="input-value" :placeholder="isHasApply?applyInfo.enterprise_license_no:'请输入营业执照'" /></view>
			</view> -->
			<view class="input">
				<view class="name">联系人</view>
				<view><input type="text" value="" v-model="name" class="input-value" :placeholder="isHasApply?applyInfo.operator_name:'请输入联系人'" /></view>
			</view>
			<view class="upload-logo">
				<view class="title">
					商家店铺logo
				</view>
				<view class="upload-u">
					<view class="up" v-if="logoShow" @tap="upload(0)">
						<u-icon name="plus" color="#626468" size="28"></u-icon>
						选择图片
					</view>
					<view class="img" v-else>
						<image class="up-img" :src="logo" mode=""></image>
						<!-- <image @tap="del(0)" class="del" src="../../static/img/del.png" mode=""></image> -->
						<text @tap="del(0)" class="mallicon icon-guanbi1 del"></text>
					</view>
				</view>
				<!-- 				<view class="upload-u">
					<view class="img">
						<u-upload :header="{'Authorization':token}" width="120" ref="uUpload" :auto-upload="true" upload-text=""
						 :multiple="true" :action="action" max-count="1" del-bg-color="#FBAB00"></u-upload>
					</view>
				</view> -->
			</view>
			<view class="input">
				<view class="name">联系方式</view>
				<view><input type="text" value="" v-model="contact" class="input-value" :placeholder="isHasApply?applyInfo.operator_contact:'请输入真实手机号'" /></view>
			</view>
			<view class="options">
				<view class="return_reason">
					<view class="return_reason_left"><text>所属行业</text></view>
					<view class="return_reason_right">
						<picker @change="bindPickerChange" :value="index" :range="categoryListSelect" style="width: 60vw;">
							<view class="uni-input" style="padding: 0;">{{categoryList[categoryListIndex].title}}</view>
						</picker>
						<!-- <image src="../../static/img/up.png" mode="aspectFit"></image> -->
						<text class="mallicon icon-sanjiao" style="color: #999;transform: rotate(-90deg);font-size: 25rpx;"></text>
					</view>
				</view>
			</view>
			<view class="options">
				<!-- 退货原因 -->
				<view class="return_reason">
					<view class="return_reason_left"><text>所属地区</text></view>
					<view class="return_reason_right" @tap="areaShow">
						<view><input type="text" class="input-value" value="" v-model="addressDetail" placeholder="详细地址 （如街道、小区、乡镇、村）" /></view>
						<!-- <city-select v-model="value" @city-change="cityChange"></city-select>
						<view class="u-demo-result-line">
							<text style="color:rgba(0,0,0,.6)" v-if="!input">请选择地区</text>
							<text v-else>{{input}}</text>
						</view>
						<image src="../../static/img/up.png" mode="aspectFit"></image> -->
					</view>
				</view>
			</view>
			<!-- <view class="address">
				<view><input type="text" class="input-value" value="" v-model="addressDetail" :placeholder="isHasApply?applyInfo.address:'详细地址 （如街道、小区、乡镇、村）'" /></view>
			</view> -->
		</view>
		<view class="add-pic">
			<view class="upload">
				<view class="upload-text">店铺详细介绍</view>
			</view>
			<view class="area"><textarea value="" class="textarea" v-model="recommend" maxlength="30" :placeholder="isHasApply?applyInfo.desc:'在此输入店铺详细介绍，不得超过30个字符'" /></view>
			<!-- <view > -->

			<view class="text">
				<label class="radio" @click="checked = !checked"><checkbox value="" :checked="checked" style="transform:scale(0.7);" /></label>
				<text class="text1">我已阅读</text>
				<text class="text2" @click="agree">《入驻协议》</text>
			</view>
			<view class="submit" @tap="submit">申请入驻</view>
			<!-- </view> -->
		</view>
		<!-- 遮罩 -->
			<!-- <u-select v-model="isMask" mode="single-column" :list="list" @confirm="confirm"></u-select> -->

	</view>
</template>

<script>
	import citySelect from '@/components/u-city-select1.vue'
	// import service from '@/store/service.js';
	// #ifdef H5
	import wx from 'weixin-js-sdk';
	// #endif
export default {
	data() {
		return {
			token:'',
			name:'',
			checked: false,
			isMask: false, //遮罩
			returnReason: '', //所属行业
			shop:'',
			contact:'',
			address:'',
			addressDetail:'',
			recommend:'',
			value:false,
			input: '',
			province:'广东',
			city:'广州',
			county:'天河',
			license:'',//营业执照
			logo:'',//商户logo
			cardZm:'',//正面身份证照
			cardFm:'',//反面身份证照
			cardSc:'',//手持身份证照
			categoryList:[],
			categoryListSelect:[],
			categoryListIndex:0,
			logoShow:true,
			cardZmShow:true,
			cardFmShow:true,
			cardScShow:true,
			list:[],
			lat:'',//纬度
			lng:'',//经度
			applyInfo:{},//申请信息
			isHasApply:false,
			returnReasonId:'',
			isHasReject:false,
			// action:service.api.user.upload,
			img:'',
			location:'',
		};
	},
	methods: {
		bindPickerChange: function(e) {
		            console.log('picker发送选择改变，携带值为', e.target.value)
		            this.categoryListIndex = e.target.value
					this.returnReason = this.categoryList[this.categoryListIndex]
					this.returnReasonId = this.categoryList[this.categoryListIndex].id
		        },
		// 获取当前位置
		getLocation(){
			const that = this
			// #ifdef H5
			wx.ready(function() {
				wx.getLocation({
				  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				  success: res=> {
				    const latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				    const longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					that.location =that.$gaoDeToBaidu(longitude,latitude)
					that.lat = that.location.latitude
					that.lng = that.location.longitude
					console.log(res,'that.$gaoDeToBaidu');
				  }
				});
			})
			// #endif
		},
		//所属行业
		// confirm(e){
		// 	this.returnReason = e[0].label
		// 	this.categoryList.map(item=>{
		// 		if(item.id===e[0].value){
		// 			this.returnReasonId=item.id
		// 		}
		// 	})
		// },
		agree() {
			uni.navigateTo({
				url: './agreement'
			});
		},
		// 退货原因
		_returnReason(returnReason) {
			if (returnReason) {
				this.returnReason = returnReason.detail.value;
			}
			console.log(this.returnReason);
		},
		cityChange(e) {
			console.log(e);
			this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.province = e.province.label
			this.city = e.city.label
			this.county = e.area.label
		},
		showChange() {
			console.log(this.value);
			this.value = !this.value
		},
		areaShow(){
			this.value = !this.value
		},
		// 提交
		submit(){
			console.log(this.lat,'lat');
			console.log(this.lng,'lng');
			if(this.shop.trim()==''){
				this.$utils.showMsg('请输入店铺名称！');
				return
			}

			if(this.contact.trim()==''){
				this.$utils.showMsg('请输入手机号！')
				return
			}
			if (this.img == '') {
			         console.log('请上传图片');
			         return
			 }
			   if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.contact))){ 
			       this.$utils.showMsg('手机号不正确！')  
			        return 
			    } 
			if(this.returnReason==''){
				this.$utils.showMsg('请输入行业!')
				return
			}
			// if(this.input.trim()==''){
			// 	this.$utils.showMsg('请选择地区！')
			// 	return
			// }
			if(this.addressDetail.trim()==''){
				this.$utils.showMsg('请输入详细地址！')
				return
			}
			if(this.recommend.trim()==''){
				this.$utils.showMsg('请输入店铺介绍！')
				return
			}
			if(!this.checked){
				this.$utils.showMsg('请阅读并勾选入驻协议！')
				return
			}
			
			this.$Request.post(this.$api.myShop.applyInto,{
				enterprise_name:this.shop,
				// enterprise_license_no:this.license,
				cate_id:this.returnReasonId,
				operator_name:this.name,
				operator_contact:this.contact,
				province:this.province,
				city:this.city,
				area:this.county,
				address:this.addressDetail,
				lat:this.lat,
				lng:this.lng,
				enterprise_logo:this.img,
				desc:this.recommend
				// idcard_zm:this.cardZm,
				// idcard_fm:this.cardFm,
				// idcard_sc:this.cardSc
			}).then(
				res => {
					console.log('申请成功',res)
					this.$utils.showMsg('申请成功')
					uni.switchTab({
					    url: '/pages/tabBar/user'
					});
					// if(res.data.code===1){
					// 	this.$utils.showMsg(res.data.info)
					// 	this.getApplyInfo()
					// }else{
					// 	this.$utils.showMsg(res.data.info)
					// }
				},
				err => {
					console.log('err: ' + JSON.stringify(err));
					this.$utils.showMsg(JSON.stringify(err));
				}
			);
		},
		upload(index){
			uni.chooseImage({
				count:1,
				sizeType: ['original', 'compressed'],
				success: (res) => {
					console.log(res,'resrfersimg');
					switch(index){
						case 0:this.logo=res.tempFilePaths[0]
						this.logoShow=false
						break;
						case 1:this.cardZm=res.tempFilePaths[0]
						this.cardZmShow=false
						break;
						case 2:this.cardFm=res.tempFilePaths[0]
						this.cardFmShow=false
						break;
						case 3:this.cardSc=res.tempFilePaths[0]
						this.cardScShow=false
						break;
						default:console.log('error');
					}
					console.log(666888,this.logo);
					
					  let tempFilePaths = res.tempFilePaths;
					 uni.uploadFile({
							  url: 'https://wxapp.hongpinlife.com/api/member/index/upload' + '?token='+uni.getStorageSync('token'), 
							  filePath: tempFilePaths[0],
							  name: 'image',
							  formData: {
								  'image': 'test'
							  },
							  success: (resTwo) => {
								  console.log('这里是图片上传成功',resTwo.data)
								  resTwo.data = JSON.parse( resTwo.data );
								  console.log(resTwo.data);
								  console.log(resTwo.data.code);
									if(resTwo.data.code===1){
										this.img = resTwo.data.data.img_url
									}else{
										this.$utils.showMsg(resTwo.data.info)
									}
									uni.hideLoading();
							  }
						  });
				}
			})
		},
		//获取分类列表
		getCategory(){
			this.$Request.get(this.$api.myShop.getCategory).then(
				res => {
					if(res.code===1){
						console.log('获取分类列表',res.data);
						this.categoryList = res.data
						this.categoryList.map(item=>{
							this.$set(item,'label',item.title)
							this.$set(item,'value',item.id)
							this.categoryListSelect.push(item.title)
						})
						this.returnReasonId = this.categoryList[this.categoryListIndex].id
						this.list = this.categoryList
					}else{
						this.$utils.showMsg(res.info)
					}
				},
				err => {
					console.log('err: ' + JSON.stringify(err));
					this.$utils.showMsg(JSON.stringify(err));
				}
			);
		},
		// 删除
		del(index){
			console.log(index);
			switch(index){
				case 0:
				this.logo=''
				this.logoShow=true
				break;
				case 1:
				this.cardZm=''
				this.cardZmShow=true
				break;
				case 2:
				this.cardFm=''
				this.cardFmShow=true
				break;
				case 3:
				this.cardSc=''
				this.cardScShow=true
				break;
				default:console.log('error');
			}
		},
		// 获取入驻申请信息
		getApplyInfo(){
			this.$Request.post(this.$api.myShop.getApplyInfo).then(
				res => {
					console.log(res,'info-res');
					if(res.code === 1){
						if(res.data.status===1){
							this.$utils.showMsg(res.info)
							setTimeout(()=>{
								uni.navigateTo({
									// url:'../profile/store/store?merch_id='+res.data.merch_id
									url:'./store?merch_id='+res.data.merch_id
								})
							},1500)
							return
						}
						if(res.data.apply==null){
							this.isHasApply = false
						}else{
							this.applyInfo = res.data.apply
							this.isHasApply = true
							console.log(this.applyInfo,'app222');
						}
					}else{
						this.$utils.showMsg(res.info)
					}
				},
				err => {
					console.log('err: ' + JSON.stringify(err));
					this.$utils.showMsg(JSON.stringify(err));
				}
			);
		},
		getWxConfig() {
			this.$Request.get(this.$api.myShop.getWxConfig, {
				url: location.href.split('#')[0]
			}).then(
				res => {
					console.log(res.data, 'wxConfig');
					const data = res.data;
					// #ifdef H5
					wx.config({
						debug: false,
						appId: data.appId,
						timestamp: data.timestamp,
						nonceStr: data.nonceStr,
						signature: data.signature,
						jsApiList: ["getLocation"]
					});
					// wx.ready(function() {
					// 	wx.checkJsApi({
					// 		jsApiList: ['getLocation'],
					// 		success: function(res) {
					// 			console.log(res, 'success-checking');
					// 			// alert(res+"success-jsApi")
					// 		}
					// 	})
					// })
					wx.error(function(res) {
						console.log(res, 'error-checking');
						alert(res)
					})
					// #endif
				},
				err => {
					console.log('err: ' + JSON.stringify(err));
					this.$utils.showMsg(JSON.stringify(err));
				}
			);
		},
	},
	components:{
		citySelect
	},
	onLoad() {
		this.getCategory()
		this.getLocation()
		this.getApplyInfo()
		// this.getWxConfig()
		
	},
	onReady() {
			let token = uni.getStorageSync('token')
			this.token = 'Bearer '+token
			// 得到整个组件对象，内部图片列表变量为"lists"
			// console.log(this.lists,'list');
	          }
};
</script>

<style lang="less" scoped>
	.upload-logo{
		height: 180upx;
		width: 100%;
		border-bottom: 1px solid #f4f4f4;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		.title{
			color: #666666;
		}	
		.upload-u{
			margin-left: 50rpx;
			height: 130rpx;
			width: 145rpx;
			font-size: 24rpx;
			background-color: #F4F5F6;
			color: #606266;
			.up{
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.img{
				height: 100%;
				width: 100%;
				position: relative;
				.up-img{
					height: 100%;
					width: 100%;
				}
				.del{
					top: 5rpx;
					right: 5rpx;
					position: absolute;
					height: 45rpx;
					width: 45rpx;
				}
			}
		}
	}
	/deep/ .uni-input{
		padding-left: 0rpx;
	}
page {
	background-color: #fff;
}
.banner {
	width: 100%;
	height: 270upx;
}
.input {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f4f4f4;
	height: 110upx;
}
.name {
	color: #666;
	padding-left: 20upx;
	width: 188upx;
	font-size: 28upx;
}
.icon {
	width: 22upx;
	height: 12upx;
	float: right;
	/* 	display: flex;
	align-items: center; */
}
.return_type_right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.upload {
	display: flex;
	padding-top: 60upx;
}
.upload-text {
	color: #666666;
	margin-left: 18upx;
}
.button {
	display: flex;
	align-items: center;
	color: #ad6928;
	background-color: #ffe9d4;
	border-radius: 20upx;
	margin-left: 12upx;
	padding: 0 22upx;
}
.more {
	width: 15upx;
	height: 15upx;
	padding-left: 8upx;
}
.add {
	width: 195upx;
	height: 195upx;
	padding-left: 20upx;
}
.area {
	margin: 30upx 20upx;
}
.textarea {
	width: 100%;
	background-color: #f4f4f4;
	font-size: 28upx;
	padding: 30upx 30upx 0 20upx;
}
.submit {
	height: 100upx;
	font-size: 36upx;
	color: #fff;
	line-height: 100upx;
	border-radius: 10upx;
	background: linear-gradient(90deg, #F8124A 0%, rgba(255, 123, 76, 1) 100%);
	text-align: center;
	margin: 0 20upx 80upx;
}
.text {
	margin-bottom: 117upx;
	font-size: 24upx;
	margin-left: 18upx;
}
.text1 {
}
.text2 {
	color: #F8124A;
}
.address {
	border-bottom: 1px solid #f4f4f4;
	height: 70upx;
	margin-top: 40upx;
	margin-left: 18upx;
}
.input-value {
	color: #000;
	font-size: 28upx;
}
.info-res{
	border-bottom: none;
	.red{
		color: red;
		font-size: 32rpx;
		font-weight: 600;
	}
	.checking{
		color: #FE7C4C;
		font-size: 32rpx;
		font-weight: 600;
	}
	.pass{
		color: green;
		font-size: 32rpx;
		font-weight: 600;
	}
}
/* 所属行业 */
.return_reason {
	display: flex;
	height: 100upx;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(244, 244, 244, 1);
	padding-left: 21upx;
	box-sizing: border-box;

	.return_reason_left {
		width: 170upx;
		> text {
			width: 200upx;
			height: 26upx;
			font-size: 28upx;
			font-weight: 500;
			color: #666;
			line-height: 42upx;
		}
	}

	.return_reason_right {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 20upx;
		justify-content: space-between;

		> input {
			flex: 1;
			padding-top: 6upx;
			font-size: 28upx;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}

		> image {
			height: 22upx;
			width: 22upx;
		}
	}
}
// 遮罩样式
.mask {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	z-index: 99;

	.mask_top {
		opacity: 0.53;
		background: rgba(0, 0, 0, 1);
		flex: 1;
	}

	.mask_content {
		height: 810upx;
		width: 100%;
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx 20upx 0px 0px;
		padding-top: 68upx;
		box-sizing: border-box;

		.title {
			height: 58upx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			// padding: 0 15upx 0 272upx;
			padding: 0 20upx;
			align-items: center;
			box-sizing: border-box;
			color: #999;

			> text {
				height: 34upx;
				font-size: 36upx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				line-height: 34upx;
			}

			> image {
				height: 58upx;
				width: 58upx;
			}
		}
	}

	.options {
		margin-top: 50upx;

		.list {
			height: 100upx;
			width: 100%;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			>text{
				font-size: 30upx;
			}
		}

		.list_end {
			border-bottom: 0;
		}
	}
	.confirm {
		color: #F8124A;
		font-size: 34upx;
	}
	.cancel {
		font-size: 34upx;
	}
}
</style>
